<template>
  <div style="display: inline-block;">
    <slot v-bind:on='toggle'>
      <v-btn
        v-bind="$attrs"
        color="indigo"
        outlined
        @click.stop="toggle"
        v-on="$listeners">
        {{btnText}}
      </v-btn>
    </slot>
    <v-dialog v-model="dialog" scrollable width="1200px">
      <v-card>
        <v-card-title>{{btnText}}</v-card-title>
        <v-divider></v-divider>
        <el-table
          :data="tableData"
          border>
          <el-table-column
            label="购物点"
            width="200">
            <template slot-scope="{ row}">
              <v-checkbox
                v-model="row.checked"
                :label="row.name"
                dense
                :disabled="row.disabled"
                @mouseup.stop="clickAll(row, row.checked)"
              ></v-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            label="商品">
            <template slot-scope="{ row }">
              <v-row>
                <v-checkbox @mouseup.stop="clickItem(row)" :disabled="item.disabled" dense v-for="item in row.childs" :key="item.id" v-model="row.selection" class="mx-2" :label="item.name" :value="item"></v-checkbox>
              </v-row>
            </template>
          </el-table-column>
        </el-table>
        <v-divider />
        <v-card-actions>
          <v-spacer />
          <v-btn color="darken-1 mr-4" @click="handleCancel">{{ $t('actions.cancel') }}</v-btn>
          <v-btn color="info darken-1" @click="handleOk">{{ $t('actions.save') }}</v-btn>
          <v-spacer />
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    selected: [Array, String],
    btnText: {
      type: String,
      default: '添加购物'
    },
  },
  data() {
    return {
      dialog: false,
      tableData: [
        {
          id: 1,
          name: '漓江土特产',
          checked: false,
          disabled: false,
          selection: [],
          childs: [
            {
              id: 1,
              name: '蛇妖',
              disabled: false
            },
            {
              id: 2,
              name: '灵妖',
              disabled: false
            },
            {
              id: 3,
              name: '灵妖',
              disabled: false
            }
          ]
        },
        {
          id: 2,
          name: '漓江土特产2',
          checked: false,
          selection: [],
          childs: [
            {
              id: 4,
              name: '蛇妖'
            },
            {
              id: 5,
              name: '灵妖'
            },
            {
              id: 6,
              name: '灵妖'
            }
          ]
        }
      ]
    }
  },
  methods: {
    toggle() {
      this.dialog = !this.dialog
      if(this.dialog && this.selected.length) {
        let res = this.tableData.map(item => {
          let index = this.selected.findIndex(val => val.id === item.id)
          let childs = index > -1 && item.childs.map(k => {
            let j = this.selected[index]['selection'].findIndex(f => f.id === k.id)
            if(j > -1) {
              return {
                ...k,
                disabled: true
              }
            }
            return {
              ...k
            }
          })
          return {
            ...item,
            selection: index > -1 ? this.selected[index]['selection'] : [],
            childs: childs ||  item.childs
          }
        })
        this.tableData = res
      }
    },
    handleOk() {
      let res = this.tableData.filter(item => !item.disabled && item.selection.filter(item => !item.disabled).length).map(item => {
        return {
          id: item.id,
          name: item.name,
          selection: item.selection.filter(val => !val.disabled)
        }
      })
      if (!res.length) {
        return this.$message.warning('请选择商品')
      }
      this.$emit('selection', res)
      this.dialog = false
    },
    handleCancel() {
      this.dialog = false
    },
    clickAll(item, bool) {
      if(!bool) {
        item.selection = item.childs
      } else {
        item.selection = item.childs.filter(item => item.disabled)
      }
    },
    clickItem(items) {
      setTimeout(() => {
        if(items.selection.length === items.childs.length) {
          items.checked = true
        } else {
          items.checked = false
        }
      }, 500)
    }
  }
}
</script>

<style>

</style>